<script setup lang="ts">
import {iconFontAddress, PagePath} from "@/util/commonUtil";
import _ from "lodash";
import {createFromIconfontCN, UserOutlined} from "@ant-design/icons-vue"
import {timeAgoConvert} from "@/util/timeUtil";
import NODATA from '@/assets/post/noData.png'

const props = defineProps({
  dataList: {
    type: Array<any>,
    default: () => []
  },
  isEnd:{
    type: Boolean,
    default: () => false
  },
  currentPage: {
    type: Number,
    default: () => 1
  }
});
const IconFont = createFromIconfontCN({
  scriptUrl: iconFontAddress,
});
const emit = defineEmits(['loadMoreCurrentPage']);
function loadMore(){
  // 页数回调
  return emit('loadMoreCurrentPage', props.currentPage  + 1);
}
</script>

<template>
  <div class="block">
    <div class="hasPostData" v-if="!_.isEmpty(dataList)">
      <template v-for="item in dataList">
        <div class="dataItem inline-flex relative p-5 m-2 rounded bg-gray-100 cursor-pointer">
          <a-row :gutter="[16,16]">
            <a-col :span="10">
              <a :href="item.type == 0 ? PagePath.PostInfoPath + item.oid : item.outsideLink" target="_blank">
                <img v-if="item.photoList && item.photoList.length > 0 "
                     class="w-full overflow-hidden rounded"
                     v-lazy="item.photoList[0]"
                     :src="item.photoList[0]"
                     :key="item.photoList[0]"
                     :alt="item.title">
              </a>
            </a-col>
            <a-col :span="14" class="relative">
              <a class="font-bold text-base line-clamp-1"
                 :href="item.type == 0 ? PagePath.PostInfoPath + item.oid : item.outsideLink"
                 target="_blank">
                {{ item.title }}
              </a>
              <div class="mt-2" v-if="item.summary">
                <span class="line-clamp-1 text-gray-400">{{ item.summary }}</span>
              </div>
              <div class="flex overflow-hidden gap-x-0.5 mt-2">
                <a-tag v-if="item.isOriginal == 1" color="green">原创</a-tag>
                <a-tag v-if="item.isOriginal == 0" color="cyan">转载</a-tag>
                <a-tag v-if="item.author" color="orange" class="inline-flex items-center">
                  <UserOutlined class="mr-1"/>
                  {{ item.author }}
                </a-tag>
                <a-tag v-if="!_.isNull(item.blogSort)" color="purple">{{ item.blogSort.sortName }}</a-tag>
                <template v-for="tagItem in item.tagList" :key="tagItem.uid">
                  <a-tag color="blue" class="inline-flex items-center">
                    <IconFont type="icon-huatifuhao"/>
                    {{ tagItem.content }}
                  </a-tag>
                </template>
              </div>
              <div class="absolute bottom-0 w-full hidden lg:flex justify-between">
                <time class="text-gray-400 inline-flex items-center gap-x-0.5" v-if="item.createTime">
                  <IconFont type="icon-shijian"/>
                  {{ timeAgoConvert(item.createTime) }}
                </time>
                <span class="text-gray-400 mr-4 inline-flex items-center gap-x-0.5" v-if="item.clickCount">
                <IconFont type="icon-shuju"/>
                {{ item.clickCount }}
              </span>
              </div>
            </a-col>
          </a-row>
        </div>
      </template>
    </div>
    <div class="PostCardEnd flex justify-center items-center mt-4">
      <div class="lookMore text-slate-400 cursor-pointer hover:text-orange-500" v-if="!isEnd"  @click="loadMore">加载更多</div>
      <div class="noMore text-slate-400 cursor-pointer" v-if="isEnd && !_.isEmpty(dataList)">我也是有底线的~</div>
      <a-empty v-if="isEnd && _.isEmpty(dataList)"
               class="flex flex-col justify-center items-center"
               :image="NODATA"
               :image-style="{height: '280px'}">
        <template #description>
          <span class="text-slate-400">嘿！这里没有数据，就像沙漠里没水一样。</span>
        </template>
      </a-empty>
    </div>
  </div>
</template>

<style scoped lang="less">
.dataItem {
  width: calc(50% - 16px);
  box-shadow: 0 2px 5px 0 hsla(0, 0%, 57%, .1);
  transition: all .6s ease;
}
@media (max-width: 768px) {
  .dataItem {
    width: 100%;
  }
}
</style>
